var UrlText = null;

function Jump() {
	Ra.sendEvent('jump', UrlText.value);
}

(function(){	
	var page = null;
	var id = 'browser-tool';
	var myDocument = document.currentScript.ownerDocument;
    var reg1 = new RegExp('^http://');
    var reg2 = new RegExp('^https://');
    var selectNode = null;
    var gui = require('nw.gui');
    gui.Window.get().show();

    //contextmenu
    var menu = new gui.Menu();
    menu.append(new gui.MenuItem({ label: 'get Xpath' }));
    menu.append(new gui.MenuItem({ label: 'get css path' }));

    function getXPath() {
        alert(selectNode.xPath);
    }

    function getCssPath() {
        alert(selectNode.cssPath);
    }

    menu.items[0].click = getXPath;
    menu.items[1].click = getCssPath;

    function onCount(node) {
        var bro = node.parentNode.childNodes;
        if (bro.length == 1) {
            return 1;
        } else {
            var c = 0;
            for (var i = 0; i < bro.length; i++) {
                bro.item(i).number = 0;
                if (bro.item(i).nodeName == node.nodeName) {
                    c++;
                    bro.item(i).number = c;
                }
            }
            return c;
        }
    }

    function highLight(node){
        if (node.nodeType == 1){
            $(node).bind('mouseover', function(event){
                node.colorBuffer = node.style.backgroundColor;
                node.style.backgroundColor = '#00bfff';
                event.stopPropagation();
            });
            $(node).bind('mouseout', function(event){
                node.style.backgroundColor = node.colorBuffer;
                event.stopPropagation();
            });
            $(node).bind('contextmenu', function(event){
                event.preventDefault();
                menu.popup(event.pageX, event.pageY);
                selectNode = node;
                event.stopPropagation();
            });

            if (node.nodeName == 'HTML'){
                node.number = 0;
                node.xPath = "/HTML";
                node.cssPath = "html";
            } else {
                if (node.hasAttribute("id")) {
                    node.xPath = '//*[@id="' + node.getAttribute("id") + '"]';
                    node.cssPath = '#' + node.getAttribute("id");
                } else {
                    var temp = onCount(node);
                    if (temp != 1) {
                        node.xPath = node.parentNode.xPath + "/" + node.nodeName + "[" + node.number + "]";
                        node.cssPath = node.parentNode.cssPath + ">" + node.nodeName +
                        ':nth-child(' + node.number + ')';
                    } else {
                        node.xPath = node.parentNode.xPath + "/" + node.nodeName;
                        node.cssPath = node.parentNode.cssPath + ">" + node.nodeName;
                    }
                    if (node.nodeName == "BODY") {
                        node.cssPath = "body";
                    }
                    if (node.nodeName == "HEAD") {
                        node.cssPath = "head";
                    }
                }
            }

            if (node.hasChildNodes){
                var sons = node.childNodes;
                for (var i = 0; i < sons.length; i++){
                    var sonNode = sons.item(i);
                    highLight(sonNode);
                }
            }
        }
    }

	//register <browser-tool-panel>
	var PANEL_NAME = 'panel';
	var panelProto = Object.create(HTMLElement.prototype, {
		attachedCallback: {
			value: function() {
				var temPanel =  myDocument.querySelector('#' + PANEL_NAME);
				panelProto.shadowRoot = this.createShadowRoot();
				panelProto.shadowRoot.appendChild(document.importNode(temPanel.content, true));
				page = panelProto.shadowRoot.querySelector('#page');
			}
		},
		onJump: {
			value: function(type, url) {
                if(page == null){
                    page = panelProto.shadowRoot.querySelector('#page');
                }
                if (reg1.test(url) || reg2.test(url)) {
                    page.src = url;
                    page.onload = function() {
                        var root = page.contentWindow.document.documentElement;
                        highLight(root);
                    }
                } else {
                    alert("url is error!");
                }

			}
		}
	});
	document.registerElement(id + '-' + PANEL_NAME, {prototype: panelProto});

	//register <browser-tool-toolbar>
	var TOOLBAR_NAME = 'toolbar';
	var toolbarProto = Object.create(HTMLElement.prototype, {
		attachedCallback : {
			value: function() {
				var temToolbar = myDocument.querySelector('#' + TOOLBAR_NAME);
				toolbarProto.shadowRoot = this.createShadowRoot();
				toolbarProto.shadowRoot.appendChild(document.importNode(temToolbar.content, true));
				UrlText = toolbarProto.shadowRoot.querySelector('#url_text');
			}
		}
	});
	document.registerElement(id + '-' + TOOLBAR_NAME, {prototype: toolbarProto});

	//register <browser-tool-config>
	var CONFIG_NAME = 'config';
	var configProto = Object.create(HTMLElement.prototype, {
		attachedCallback: {
			value: function() {
				var temConfig = myDocument.querySelector('#' + CONFIG_NAME);
				configProto.shadowRoot = this.createShadowRoot();
				configProto.shadowRoot.appendChild(document.importNode(temConfig.content,true));
			}
		}
	});
	document.registerElement(id + '-' + CONFIG_NAME, {prototype: configProto});
})();